<script setup>
import { ref } from 'vue';
import { ElDrawer, ElInput, ElSelect, ElOption, ElButton } from 'element-plus';
import 'element-plus/dist/index.css';

// 模拟留言数据
const messages = ref([
  {
    id: 1,
    title: '南村群童欺我老无力',
    content: '谁道寻常百姓家，山重水复疑无路。',
    date: '2024-02-22',
    type: '随笔',
    likes: 0,
    comments: []
  },
  {
    id: 2,
    title: '5味东西，可以让你的生活更加美好',
    content: '生活需要仪式感，这些小物件能带来不一样的体验。',
    date: '2024-02-21',
    type: '生活',
    likes: 0,
    comments: []
  }
]);

// 控制抽屉显示
const drawerVisible = ref(false);
// 新留言表单
const newMessage = ref({
  title: '',
  content: '',
  type: '随笔'
});

// 打开抽屉
const openDrawer = () => {
  drawerVisible.value = true;
};

// 关闭抽屉
const closeDrawer = () => {
  drawerVisible.value = false;
  newMessage.value = {
    title: '',
    content: '',
    type: '随笔'
  };
};

// 添加新留言
const addMessage = () => {
  if (!newMessage.value.title.trim() || !newMessage.value.content.trim()) return;
  
  messages.value.unshift({
    id: Date.now(),
    ...newMessage.value,
    date: new Date().toLocaleDateString(),
    likes: 0,
    comments: []
  });
  
  closeDrawer();
};

// 留言类型
const messageTypes = ['随笔', '生活', '工作', '学习', '其他'];
</script>

<template>
  <div class="message-board">
    <!-- 留言列表 -->
    <div class="message-grid">
      <div 
        v-for="message in messages" 
        :key="message.id" 
        class="message-card"
        @click="openDrawer"
      >
        <div class="message-type">{{ message.type }}</div>
        <h3 class="message-title">{{ message.title }}</h3>
        <p class="message-content">{{ message.content }}</p>
        <div class="message-footer">
          <span class="date">{{ message.date }}</span>
          <div class="actions">
            <span class="likes">
              <i class="icon-heart"></i>
              {{ message.likes }}
            </span>
            <span class="comments">
              <i class="icon-message"></i>
              {{ message.comments.length }}
            </span>
          </div>
        </div>
      </div>
      
      <!-- 添加留言卡片 -->
      <div class="add-message-card" @click="openDrawer">
        <i class="icon-plus"></i>
        <span>写留言</span>
      </div>
    </div>

    <!-- 新增留言抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      title="写留言"
      direction="rtl"
      size="35%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <template #default>
        <div class="drawer-content">
          <div class="form-group">
            <label>标题</label>
            <el-input 
              v-model="newMessage.title"
              placeholder="请输入标题"
            />
          </div>
          <div class="form-group">
            <label>内容</label>
            <el-input 
              v-model="newMessage.content"
              type="textarea"
              :rows="4"
              placeholder="写下你的想法..."
            />
          </div>
          <div class="form-group">
            <label>类型</label>
            <el-select v-model="newMessage.type" class="w-full">
              <el-option
                v-for="type in messageTypes"
                :key="type"
                :label="type"
                :value="type"
              />
            </el-select>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="drawer-footer">
          <el-button @click="closeDrawer">取消</el-button>
          <el-button type="primary" @click="addMessage">发布</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style lang="less" scoped>
.message-board {
  padding: 80px 20px 20px;
  max-width: 1200px;
  margin: 0 auto;

  .message-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }

  .message-card, .add-message-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s;
    min-height: 200px;
    display: flex;
    flex-direction: column;

    &:hover {
      transform: translateY(-5px);
    }
  }

  .message-card {
    .message-type {
      color: #42b983;
      font-size: 0.9rem;
      margin-bottom: 10px;
    }

    .message-title {
      font-size: 1.2rem;
      margin-bottom: 10px;
      color: #333;
    }

    .message-content {
      flex: 1;
      color: #666;
      line-height: 1.5;
      margin-bottom: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .message-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #999;
      font-size: 0.9rem;

      .actions {
        display: flex;
        gap: 15px;

        span {
          display: flex;
          align-items: center;
          gap: 5px;
        }
      }
    }
  }

  .add-message-card {
    justify-content: center;
    align-items: center;
    border: 2px dashed #ddd;
    background: #f9f9f9;
    color: #999;
    font-size: 1.1rem;

    i {
      font-size: 2rem;
      margin-bottom: 10px;
    }

    &:hover {
      border-color: #42b983;
      color: #42b983;
    }
  }

  .drawer-content {
    padding: 20px;

    .form-group {
      margin-bottom: 20px;

      label {
        display: block;
        margin-bottom: 8px;
        color: #666;
        font-size: 0.9rem;
      }

      :deep(.el-input),
      :deep(.el-select) {
        width: 100%;
      }
    }
  }

  .drawer-footer {
    padding: 20px;
    text-align: right;
  }
}

// 确保 Element Plus 样式生效
:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

:deep(.el-drawer__body) {
  padding: 0;
}
</style> 